<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
              <p class="flex flex_vcenter pdb20">
                <i class="titleTag"></i>
                <span class="fRedBig">就诊安排确认</span>
              </p>
              <common-box2>
                <div class="contain2 bg">
                  <table class="table">
                    <tbody>
                    <tr>
                      <th>患者</th>
                      <th>就诊地点</th>
                      <th>就诊时间</th>
                      <th></th>
                      <th></th>
                    </tr>
                    <tr v-for="item in patientlists" track-by="$index">
                      <td>
                        <img :src="item.avatarFileId" class="fl">
                        <div class="fl w400">
                          <p>
                            <span>{{item.personName}}</span>
                            <button type="button" class="btn btn-default vip">
                              <span>{{item.memberTypeText}}</span>
                            </button>
                            <button type="button" class="btn btn-default disease" v-for="subitem in item.chronicList">{{subitem.chronicName}}</button>
                          </p>
                        </div>
                      </td>
                      <td>
                        <p>{{item.orgName}}</p>
                        <p>{{item.deptName}}</p>
                      </td>
                      <td>
                        <p>{{item.planDate}}</p>
                        <p>{{item.planClasstext}}</p>
                      </td>
                      <td>
                        <p :class="{green:item.serviceRecordState=='02',orange:item.serviceRecordState=='01',red:item.serviceRecordState=='03'}">{{item.serviceRecordStateText}}</p>
                      </td>
                      <td>
                        <span class="glyphicon" :class="{'glyphicon-list-alt':item.serviceRecordState=='01'}" @click="verifypatientpaln(item)"></span>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </common-box2>
            </div>
        </div>
        <div class="modal fade " id="agreeordisagree" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">审核病人就诊申请</h4>
                    </div>
                    <div class="modal-body">

                        <p class="text-center">是否同意病人{{showdata.personName}}在{{showdata.planDate}}就诊</p>
                         <div class="buttongroup">
                            <button type="button" class="default blue center" @click="planconfirm">确定</button>
                            <button type="button" class="default center dele" @click="refuselplan">拒绝</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import commonBox2 from 'components/commonBox2'
export default {
    data() {
            return {
                patientlists: [],
                showdata: {
                    personName:"",
                    planDate:"",
                },
            }
        },
        computed: {

        },
        components: {
            moduleHead, menuList, commonBox2
        },
        ready() {

            this.getlists();

        },
        methods: {

            getlists() {
                 var that = this;
                    $.when(Public.commonajax("base.doctorProvider", "getDoctInfoAndOrgDoctors", "['']"))
                        .done(function(res) {
                            if (res.code == 200) {
                                $.when(Public.commonajax("coms.doctorPlanService", "queryMpiVisitPlan", "['061','" + res.body.doctorId + "']")).done(function(res2) {
                                    if (res2.code == 200) {
                                        $.each(res2.body, function(index, el) {
                                            el.avatarFileId = Public.IMGVIEW_URL() + el.avatarFileId;
                                            if(el.planClass==1){
                                                el.planClasstext="上午"
                                            }else if(el.planClass==2){
                                                 el.planClasstext="下午"
                                            }else{
                                                 el.planClasstext="晚上"
                                            }
                                        });
                                        that.patientlists = res2.body;
                                    }

                                });
                            }
                        })
                },
                // 审核弹框
                verifypatientpaln(item) {
                    $("#agreeordisagree").modal("show");
                    this.showdata = item;

                },
                planconfirm() {
                     var that = this;
                    $.when(Public.commonajax("coms.doctorPlanService", "comfirmPatientVisitPlan", "['" + this.showdata.visitPlanId + "']")).done(function(res) {
                        if (res.code == 200) {
                             $("#agreeordisagree").modal("hide");
                            Public.ajaxPrompt("保存成功");
                              that.getlists();

                        }
                    });
                },
                refuselplan() {
                     var that = this;
                    $.when(Public.commonajax("coms.doctorPlanService", "refusePatientVisitPlan", "['" + this.showdata.visitPlanId + "']")).done(function(res) {
                        if (res.code == 200) {
                            $("#agreeordisagree").modal("hide");
                            Public.ajaxPrompt("保存成功");
                              that.getlists();

                        }

                    });
                },

        },
        events: {



        },
        watch: {

        },
}
</script>
<style scoped>
button.ok {
    border: #1dc499 1px solid;
    background: none;
    color: #1dc499
}

.contain2 table p button.disease {
    border: 1px solid #1dc499;
    color: #1dc499;
    padding: 1px 8px;
    margin-left: 3px;
    cursor: default;
    margin-bottom: 5px;
}

.contain2 table p button.vip {
    border: 1px solid #ff8c68;
    color: #ff8c68;
    padding: 1px 8px;
    margin-left: 3px;
    margin-bottom: 5px;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active {
    background: none;
    cursor: default;
}

.contain2 table tr td:nth-child(1) {
    text-align: left;
    width: 400px
}
.contain2 table tr td .glyphicon-list-alt {
   cursor: pointer;

}
.w400 {
    width: 300px
}

.contain2 .table>tbody>tr>th {
    border-top: none;
    background: #fafafa;
    text-align: center;
    height: 40px;
    line-height: 40px
}

.contain2 .table>tbody>tr>td {
    padding-top: 20px;
    text-align: center;
}
.contain2 .table>tbody>tr>td>div.fl{
text-align: left;
padding-top: 20px;
}
.contain2 .table>tbody>tr>td:nth-child(1) {
    padding-top: 0;
    text-align: left
}

.contain2 .table td p.red {
    color: #ef5037;
}

.contain2 .table td p.orange {
    color: #fdab36;
}

.contain2 .table td p.green {
    color: #1dc499;
}



table tr td img {
    margin: 10px 20px 10px 0;
    border-radius: 50%;
    width: 60px;
    height: 60px;
}

.contain2 .table>tbody>tr>td:nth-child(4),
.contain2 .table>tbody>tr>td:nth-child(5) {
    text-align: left
}




.buttongroup {
    width: 300px;
    margin: 10px auto;
}

.buttongroup button {
    display: inline-block;
}

.buttongroup button:nth-child(2) {
    margin-left: 30px
}
#agreeordisagree .modal-body {
    min-height: 200px;
}
#agreeordisagree .modal-body p{
    height: 100px;line-height: 30px;font-size: 16px;padding-top: 30px;
}
</style>
